<template>
	<view class="my-style">
		<view class="my-head">
			<view class="my-head-left">
				<image :src="avatarUrl" mode=""></image>
				<text>{{nickName}}</text>
			</view>
			<view class="my-head-right" @click="logonclick">请登录</view>
		</view>
		
		<view class="my-body">
			<view class="my-body-top">
				<view class="my-body-top-cont" v-for="item in bodayTopData" :key="item.name">
					<image :src="item.img" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			
			<view class="my-body-content">
				<view class="my-body-content-cont" v-for="item in bodayContData" :key="item.name">
					
					<view v-if="item.name" class="content-cont-list">
						<image :src="item.img" mode=""></image>
						<view class="content-cont-right">
							<view>{{item.name}}</view>
							<view style="color: #ccc;"> > </view>
						</view>
					</view>
					
					<!-- 空 -->
					<view v-else class="content-cont-kong"></view>
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bodayTopData:[
					{name:"我的咨询",img:"../../static/m1.png"},
					{name:"我的资料",img:"../../static/m2.png"},
					{name:"关注楼盘",img:"../../static/m3.png"},
					{name:"消息通知",img:"../../static/m4.png"}
				],
				bodayContData:[
					{name:"我的积分",img:"../../static/m5.png"},
					{name:"我的订阅",img:"../../static/m6.png"},
					{name:"房贷计算器",img:"../../static/m7.png"},
					{},
					{name:"浏览记录",img:"../../static/m8.png"},
					{name:"微聊客服",img:"../../static/m9.png"},
					{},
					{name:"我的问答",img:"../../static/m10.png"},
					{name:"设置",img:"../../static/m11.png"},
				],
				nickName:"您的昵称",
				avatarUrl:"../../static/c7.png"
			}
		},
		methods: {
			logonclick(){
				console.log('登录')
				let _this = this
				//弹窗并获取用户数据
				uni.getUserProfile({
					desc: '获取您的信息,登录',
					success(obj) {
						console.log(obj)
						_this.nickName = obj.userInfo.nickName
						_this.avatarUrl = obj.userInfo.avatarUrl
					}
				})
				
				

			}
		}
	}
</script>

<style lang="scss">
.my-style{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.my-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		padding: 20px 10px 30px 10px;
		background-color: #2e843c;
		.my-head-left{
			display: flex;
			align-items: center;
			image{
				width: 50px;
				height: 50px;
				border-radius: 25px;
				margin-right: 10px;
			}
			text{
				color: #fff;
				font-size: 20px;
				
			}
		}
		.my-head-right{
			color: #fff;
			width: 100px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 20px;
			border: 1px solid #fff;
		}
	}
	
	.my-body{
		flex: 1;
		background-color: #ccc;
		position: relative;
		padding: 100px 10px 0 10px;
		
		.my-body-top{
			width: 90%;
			border-radius: 6px;
			position: absolute;
			left: 5%;
			top: -14px;
			display: flex;
			background-color: #fff;
			.my-body-top-cont{
				width: 25%;
				padding: 10px;
				font-size: 14px;
				text-align:center;
				image{
					width: 40px;
					height: 40px;
				}
			}
		}
		.my-body-content{
			.my-body-content-cont{
				// margin-bottom: 10px;
				
				padding: 0 10px;
				.content-cont-list{
					display: flex;
					align-items: center;
					line-height: 42px;
					background-color: #fff;
					image{
						width: 32px;
						height: 32px;
						margin-right: 10px;
					}
					.content-cont-right{
						flex: 1;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #ccc;
						font-weight: bold;
						font-size: 16px;
					}
				}
				.content-cont-kong{
					height: 10px;
					background-color: #ccc;
				}
				
			}
		}
	}
}
</style>
